﻿ <!DOCTYPE html>
 <html lang="zh">
 <%@ include  file="../header.jsp"%>
 
 	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	    <meta http-equiv="Content-Language" content="zh-CN"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	    <meta name="description" content="shop">
	    <meta name="author" content="letsun">
	    
	    <title>商品详情</title>
 		<link rel="shortcut icon" href="/shop-pc/resources/icon/favicon.ico" type="image/x-icon" />
	    <link rel="icon" href="/shop-pc/resources/icon/favicon.ico" type="image/x-icon" />
	    <script src="${resources}/js/jquery.min.js"></script>
	    <script src="${resources}/js/score.js"></script>
	   
	    <script src="${resources}/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="${resources}/css/bootstrap.min.css"  />
		<link href="${resources}/plugs/fontAwesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		
		<script src="${resources}/js/jquery.gritter.min.js"></script>
		<script src="${resources}/js/jquery.gritter.min.extend.js"></script>
  		<link rel="stylesheet" type="text/css"  href="${resources}/css/jquery.gritter.css"  />
  		<!-- 分页插件 -->
		<script src="${resources}/js/jqPaginator.min.js"></script>
		

		<link rel="stylesheet" type="text/css" href="${resources}/css/main.css" />
		
		<link href="${resources}/css/foot.css" rel="stylesheet" type="text/css">

		
		<!-- page specific plugin styles -->
		<link href="${resources}/css/goodsdetails.css" rel="stylesheet" type="text/css">
		<style>
		
		/* table */
	  	.table th{
	  		background-color:#f7f7f7;
	  		font-weight:bolder;
	  	}
	  	
	  	/* fix */
	  	.nav-tabs{
	  		margin-bottom:10px;
	  	}
	  	.tab-content{
			margin-bottom:30px;
		}
		body{
			background-color:#FFF;
		}
		.breadcrumb
		{
		    background-color: #fff;
			border-bottom:1px solid #cccccc;
		 	border-radius: 0px;
		}
		.breadcrumb>li+li:before {
		    padding: 0 5px;
		    color: #ccc;
		    content: ">";
		}
		.breadcrumb a{
			color:#666;
		}

		/* 数量加减*/
		.choose-btns{ border-bottom:medium none; width:550px; clear:both; overflow:hidden;}/*20150827*/
		.choose-amount{ border:1px #CCC solid; height:42px; margin:0px 10px 0 0; overflow:hidden; position:relative;width: 150px;}
		.fl{ float:left;}
		.choose-btns a{ display:block; text-decoration:none; white-space:nowrap;}
		.choose-btns a:hover{ text-decoration:none;}

		.choose-amount .btn-reduce{ bottom:-1px; float: left; font-size: 20px; color: #333;}
		.choose-amount .btn-add{ top:-1px; float: right; font-size: 20px; color: #333;}
		.choose-amount a{ background:#f1f1f1 none repeat scroll 0 0;font-weight: 600; width: 42px; height:42px; line-height:42px; overflow:hidden; text-align:center;}
		.choose-amount .btn-no{ background:#fff none repeat scroll 0 0; color:#dbdbdb; cursor:not-allowed;}
		.choose-amount input{ border:0 none; display:block; width: 60px; height:42px; color:#000; font-size: 16px; font-weight: 600;  line-height:42px; text-align:center; float: left;}
		 
		.choose-btns .choose-btn{ overflow:hidden; position:relative;}
		.choose-btns .choose-btn .shop-btn{ background:#ff3300; font-size:18px; padding:10px 0px 10px 50px; color:#FFF; display:block; width:110px; height:30px; line-height:30px; font-family:"Microsoft YaHei UI", "微软雅黑"; font-weight:bold;  position:relative;}
		.choose-btn b{ background:url(${resources}/images/t_send.png) no-repeat; background-position:-124px -0px; width:28px; height:28px; position:absolute; top:8px; left:10px; overflow:hidden;}
		.choose-btns .choose-btn .shop-btn:hover{ background:#c70909;}/*20150825修改颜色值*/
		
		
		.panel-default>.panel-heading {
			color: #FFF;
			background-color: ##BDC3C7;
		}
		.panel-group {
			margin-bottom: 0px;
		}


		.panel-group .panel {
			margin-bottom: 0;
			border-radius: 0px;
		}
		
		.panel-heading {
			padding: 10px 15px;
			border-radius: 0px;
		}
		
		.panel-title {
			margin-top: 0;
			margin-bottom: 0;
			font-size: 14px;
			font-weight: bold;
		}
		
		.panel-body {
			padding: 10px 25px;
		}
		
		.panel-body li{
			height:18px;
			line-height:18px;
		}
		
		
		.detail-area  a{text-decoration:none;}
		
		
		.p-name {
			float: left;
			width: 119px;
			height: 30px;
			line-height: 15px;
			overflow: hidden;
		}
		
		.p-img {
			float: left;
			margin-right: 5px;
		}
		
		
		.mc li{
			border-top: 0;
			overflow: hidden;
			float: left;
			width: 197px;
			padding: 7px 0px 7px;
			height: 66px;
			border-top: 1px dotted #ddd;
		}
		
		.mc li:first-child {
			border: none;
		}
		
		.mc .p-price {
			float: left;
			height: 18px;
			margin-top: 2px;
			line-height: 18px;
			color:#C0392B;
			font-size: 14px;
			font-weight: bold;
			
		}
		
		
		.ab-goods li {
			padding: 0px;
			margin: 0px;
			margin-bottom: 5px;
			height: 280px;
			border-top: 1px dotted #CCC;
		}
		
		.ab-goods li:first-child {
			border:none;
		}

		.ab-goods li .p-img {
			width: 100%;
			padding: 0;
			margin: 0px;
			text-align: center;
			position: relative;
		}
		
		.ab-goods li .p-name {
			height: 36px;
			line-height: 18px;
			margin-bottom: 5px;
			overflow: hidden;
			display: block;
			width: 190px
		}
		
		.ab-goods li .p-price {
			height: 16px;
			line-height: 16px;
			margin-bottom: 4px;
			overflow: hidden;
			float: left;
			display: block;
			width: 190px;
		}
		
		.ab-goods li .p-price .price {
			float: left;
			margin-right: 6px;
			color: #e4393c;
			font-weight: 700;
			font-family: verdana;
			font-size: 14px;
		}
		
		.collect-panel{
			padding:10px;
			text-align:right;
		}
		.collect-btn-not{
			color:#FF6666;
		}
		
		.collect-btn-ok{
			color:#FF6600;
		}

		#prizecontent  img{
			width:  100%;
		}
		.other-good table tbody tr:hover {color: #de2525; background-color: #ddd;}
		#merchantIntro  img{
			width : 100%;
		}
		.goods-area {
		    position: relative;
		    padding-bottom: 60px;
	    }
	    .pageBtn {
            position: absolute;
            bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            left: 50%;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        .pageBtn li {
            width: 40px;
            height: 40px;
            float: left;
            border-right: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
        }

        .pageBtn li:last-child {
            border: none;
        }

        .pageBtn .prev, .pageBtn .next {
            width: 60px;
        }
        
        .pageBtn .active{
        	background-color: #f77d00;
        	color: #fff;
        }
        
        
       .rightNav {
			position: fixed;
			right: 0;
			top: 50%;
			margin-top: -40px;
			background-color: #7A6E6E;
		}
		.rightNav .list:first-child {
			border-bottom: 1px solid #fff;
		}
		.rightNav .list:first-child span {
			width: 50px;
			height: 50px;
			line-height: 45px;
			font-size: 14px;
			padding-left: 5px;
			text-align: center;
			color: #fff;
			position: absolute;
			top: 0;
		}
		.rightNav .list:last-child:hover .img {
			display: none;
		}
		.rightNav .list:last-child span {
			font-size: 17px;
			text-align: center;
			line-height: 25px;
			display: inline-block;
			color: #fff;
			background-color: #de2525;
		}
		.rightNav .list > a {
			width: 50px;
			height: 50px;
			overflow: hidden;
			font-size: 22px;
			cursor: pointer;
			display: block;
		}
		.rightNav .list > a i {
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #FFF;
		}
        .raty {
			color:red
		}
		</style>
 	</head>


 
 	<body id="body">
		<ul class="rightNav">
			<li class="list">
				<a href="${path}/manage/cart/cartShow?marketId=3">
					<div class="img"><img src="${resources}/images/1_14.png" alt=""></div>
					<c:if test="${cartCount!=null}"><span id="cartCount">${cartCount}</span></c:if>
			        <c:if test="${cartCount==null}"><span id="cartCount">0</span></c:if>
				</a>
			</li>
			<li class="list">
				<a href="#body">
					<div class="img"><i class="fa fa-chevron-up" aria-hidden="true"></i></div>
					<span>回到顶部</span>
				</a>
			</li>
		</ul>
 
	<!--面包屑 begin-->
	<div class="crumbs-area">
		<ul>
			<li>
				<a href="javascript:void(0)">全部结果</a>
				<i class="fa fa-angle-double-right"></i>
			</li>
			
			<li>
				<a href="javascript:void(0)" >${goodsVO.goods.category.name}</a>
				<i class="fa fa-angle-double-right"></i>
			</li>
			<li>
				<span>${goodsVO.goods.name}</span>
			</li>
		</ul>
	</div>
	<!--面包屑 end-->
	
	
	<!-- 商品详情  begin -->
	<div class="detail-area ">
		<div class="info-area">
			<!-- <div class="smack">
				<span>热卖</span>
				<span>限时</span>
			</div> -->
			<div class="info-panel">
				<!--preview begin -->
				<div class="preview p-clouds">
					<div id="vertical" class="bigImg">
						
						<c:forEach items="${goodsVO.goods.goodsPicList}" var="pic" step="1">
								<img src="${pic.picurl}" width="640" height="320" alt="" id="midimg" />
						</c:forEach>
						<div style="display:none;" id="winSelector"></div>
					</div>
					
					<!--bigImg end-->	
					<div class="smallImg">
						<div class="scrollbutton smallImgUp disabled"></div>
						<div id="imageMenu">
							<ul>
								<c:forEach items="${goodsVO.goods.goodsPicList}" var="pic">
									
									<li ><img src="${pic.picurl}" width="68" height="68" alt="相册"/></li>
									
								</c:forEach>
							</ul>
						</div>
						<div class="scrollbutton smallImgDown"></div>
					</div><!--smallImg end-->	
					<div id="bigView" style="display:none;"><img width="1280" height="640" alt="" src="" /></div>

					<!-- 收藏商品 -->
					<div class="collect-panel">
					</div>

				</div>
				<!--preview end-->

				<!--good-info begin-->
				<div class="good-info-panel">
					<div class="good-title" style="height:auto">
						<p>${goodsVO.goods.name}</p>
						<span class="cashCoupon"></span>
					</div>
					
					<div class="good-price-panel">
						<p><b>优惠价：</b><span class="prize-b">￥${goodsVO.goods.price}</span></p>
						<p><b style="font-weight: normal;">原价：  </b><span  class=" good-price">￥${goodsVO.goods.originalPrice}</span></p>
					</div>
					
					<div style="padding: 20px 10px;border-bottom: 1px solid #ddd;">
						<b style="float:left;">评论：</b>
						<div id="goodsRaty" style="float:left;color:red">
							<span class="raty" data-score="${goodsVO.score}"></span><span class="date"></span>
						</div>
						<p><a href="#anchor">(已有${goodsVO.commentNum}条评论)</a></p><br/>
						<p class="stock"><span>存货:</span>${goodsVO.goods.remain}</p>
					</div>

					<div class="pay-num-panel">
						<div class="choose-amount fl" id="amountDiv" style="">
				            <div class="wrap-input">
				                <a class="btn-reduce" href="javascript:void(0);">-</a>
								<input id="buy_amount" class="text" value="1">
				                <a class="btn-add" href="javascript:void(0);">+</a>
				            </div>
				        </div>
					       
					       <c:if test="${isLife==true}"> <a class="btn btn-lg btn-danger"  href="JavaScript:void(0)" style="padding: 8px 30px;border-radius: 0;color:#FFF" onclick="purchase()">立即购买</a></c:if>
						   <c:if test="${isLife==false}"> <a class="btn btn-lg btn-danger"  href="javascript:void(0)" onclick="addToCart()"; style="padding: 8px 30px;border-radius: 0;color:#FFF">加入购物车</a></c:if>
					</div>
					
					
				</div>
				<!--good-info end-->
			</div>
			
			<c:if test="${isLife==true}">
				<div class="other-good">
					<table>
						<thead>
						<tr>
							<th width="70%">该商家的其他商品</th>
							<th width="10%">优惠价</th>
							<th width="10%">原价</th>
							<th width="10%">已售</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach items="${goodsList}" var="goods">
								<tr	onclick="goodsInfo(${goods.id})" style="cursor:pointer;">
									<td >${goods.name}</td>
									<td class="p-price">￥${goods.price}</td>
									<td>￥${goods.originalPrice}</td>
									<td>${goods.sales}</td>
								</tr>
						</c:forEach>
						</tbody>
					</table>
				</div>
			</c:if>
			<!-- info-panel end-->
			
			<div class="detail-area-panel">
				<!-- 商品图片详情和商品评论-->
			<ul class="nav nav-tabs"  name="anchor" id="anchor">
				<li class="active">
					<a href="#home"  aria-controls="home" onclick="info()" role="tab" data-toggle="tab">商品详情</a>
				</li>
				<li>					
					<a href="#profile" onclick="com()" aria-controls="profile" role="tab" data-toggle="tab">商品评论</a>
				</li>
				
				<c:if test="${isLife==true}">
					<li>
						<a href="#store" aria-controls="profile" onclick="merchant()" role="tab" data-toggle="tab">商家介绍</a>
					</li>
				</c:if>
			</ul>
				
			<div class="tab-content">
					<div class="tab-pane active" id="home">
						<div id="prizecontent" class="detail-tab-panel" >
									${goodsVO.goods.content}
						</div>
					</div>
					<div class="tab-pane" id="profile" >
						
					</div>
					<div class="tab-pane" id="store">
						<div id="merchantIntro" class="detail-tab-panel" >
							${goodsVO.goods.merchant.intro}
						</div>
					</div>
			</div>
			
			<!-- 分页 -->
			<div class="goods-area" style="display: none;">
				<ul id="pageCon">
				</ul>
			</div>
			<!-- 商品图片详情和商品评论-->
			</div>
		</div>
		
	</div>
	<!-- 商品详情  end -->
	


<%@ include file="../footer.jsp"%>

	
	<script type="text/javascript">
		
		function goodsInfo(goodsId){
			window.location.href="${path}/commodity/info?goodsId="+goodsId;
		}
		function com(){
			$(".goods-area").show();
		}
		function info(){
			$(".goods-area").hide();
		}
		function merchant(){
			$(".goods-area").hide();
		}
		
	</script>

	<!-- 购物车 -->
	<script type="text/javascript">
	/*购物车-删除产品*/
	function delGood(num){
		$("#cartItem" + num).remove();
		delCartItem(num) ;
	}
	
  	function delCartItem(gid) {
		//showMask();
	    $.ajax({
	        url: "/shop-pc/cart/del/"+gid+"",
	        type: "post",
	        success: function(data) {
	        	if(data.code == "000"){
	        		var result = eval('(' +  data.result + ')');
	        		//修改购物车
	        		$('#cartAmount1').text(result.amount);
	        		$('#cartAmount').text(result.amount);
	        		$('#cartTotal').text(result.total);
	        		//删除购物车条目
	        		$("#cartItem"+gid).remove();
	        	}
	        	//setTimeout("hideMask()", 100);
	        },
	        cache: false,
	        error: function() {
	        	//setTimeout("hideMask()", 100);
	        }
	    });
	}
	</script>
	


<!-- raty  -->
<!-- raty script&css -->
<link rel="stylesheet" type="text/css" href="${resources}/css/jquery.raty.css">
<script src="${resources}/js/jquery.raty.js"></script>
<script>
	
	$(function(){
		
 	})
</script>	

<!-- 收藏商品 -->
<script>

 	function collect(){
		$.ajax({
			type:"post",
			url:"/shop-pc/goods/3/collect",
			success:function(data,textStatus){	
				if(data.code==200){
					alertSuccess("收藏成功");
					var html= '<span class="collect-btn-not" onclick="collect();"><i class="fa fa-star-o"></i>取消收藏</span>';
					$(".collect-panel").html(html);
				}else if(data.code==300){
					alertSuccess("取消收藏成功");
					var html= '<span class="collect-btn-ok"  onclick="collect()"><i class="fa fa-star-o"></i>收藏商品</span>'; 
					$(".collect-panel").html(html);
				}else{
					alertDanger("系统错误");
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				alertDanger("网络异常");
	        }	
		})
	}
</script>	


			

<!-- 购物车 -->
<script>
	$(function(){
		
		$(".btn-add").click(function(){
			var amount = $("#buy_amount").val();
			amount = parseInt(amount)+1;
			//显示商品数目
			$("#buy_amount").val(amount);
			//隐藏提交表单
			$("#amount").val(amount);
		})
		
		$(".btn-reduce").click(function(){
			var amount = $("#buy_amount").val();
			if(amount>1){
				var amount = $("#buy_amount").val();
				amount = parseInt(amount)-1;
				//显示商品数目
				$("#buy_amount").val(amount);
				//隐藏提交表单
				$("#amount").val(amount)
			}
		})
		
		$("#buy_amount").change(function(){
			var amount = $(this).val();
			if(amount<=0){
				$(this).val(1);
				amount = 1;
			}
			//隐藏提交表单
			$("#amount").val(amount)
		})
	})

	/*模态窗口显示*/
	function showMask(){
		$('.mask').show();
	}
	/*模态窗口关闭*/
	function hideMask(){
		$('.mask').hide();
	}

	//快速购买
	function fastbuy(){
		$.ajax({
			type:"post",
			url:"/shop-pc/cart/fastbuy",
			data:$("#cookieForm").serialize(),
			success:function(data,textStatus){	
				if(data.code==200){
					window.location.href="/shop-pc/manage/order/create"
					//setTimeout("hideMask()", 100);
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				//alert("系统错误");
	        	//setTimeout("hideMask()", 100);
	        }	
		})
	}
	
	//立即购买
	function purchase(){
		
		window.location.href="${path}/manage/vouchermarket/order/create?goodsid=${goodsVO.goods.id}&amount="+$("#buy_amount").val();
	}
	
	//加入购物车
	function addToCart(){
		//未登陆
		if("${shiroMember}"==""){
			window.location.href="${path}/manage/cart/addCart?goodsId=${goodsVO.goods.id}&amount="+$("#buy_amount").val();
		}else{
			$.ajax({
				type:"post",
				url:"${path}/manage/cart/ajaddCart?goodsId=${goodsVO.goods.id}&amount="+$("#buy_amount").val(),
				success:function(data){
					if(data.code==000){
		        		//修改购物车
		        		_letsun_show_msg("war","添加到购物车成功",1000); 
		        		$("#cartCount").html(data.result);
					}
				},
				error: function() {
		        	setTimeout("hideMask()", 100);
		        }
			})
		}
	}

	
</script>

<!-- 放大镜功能 -->
<script type="text/javascript">
$(document).ready(function(){
	// 图片上下滚动
	var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
	var interval = $("#imageMenu li:first").width();
	var curIndex = 0;
	
	$('.scrollbutton').click(function(){
		if( $(this).hasClass('disabled') ) return false;
		
		if ($(this).hasClass('smallImgUp')) --curIndex;
		else ++curIndex;
		
		$('.scrollbutton').removeClass('disabled');
		if (curIndex == 0) $('.smallImgUp').addClass('disabled');
		if (curIndex == count-1) $('.smallImgDown').addClass('disabled');
		
		$("#imageMenu ul").stop(false, true).animate({"marginLeft" : -curIndex*interval + "px"}, 600);
	});	
	// 解决 ie6 select框 问题
	$.fn.decorateIframe = function(options) {
        if ( $.support.msie &&  $.support.version < 7) {
            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
            $(this).each(function() {
                var $myThis = $(this);
                //创建一个IFRAME
                var divIframe = $("<iframe />");
                divIframe.attr("id", opts.iframeId);
                divIframe.css("position", "absolute");
                divIframe.css("display", "none");
                divIframe.css("display", "block");
                divIframe.css("z-index", opts.iframeZIndex);
                divIframe.css("border");
                divIframe.css("top", "0");
                divIframe.css("left", "0");
                if (opts.width == 0) {
                    divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                if (opts.height == 0) {
                    divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                divIframe.css("filter", "mask(color=#fff)");
                $myThis.append(divIframe);
            });
        }
    }
    $.fn.decorateIframe.defaults = {
        iframeId: "decorateIframe1",
        iframeZIndex: -1,
        width: 0,
        height: 0
    }
    //放大镜视窗
    $("#bigView").decorateIframe();
    //点击到中图
    var midChangeHandler = null;
	
    $("#imageMenu li img").bind("click", function(){
		if ($(this).attr("id") != "onlickImg") {
			midChange($(this).attr("src").replace("small", "mid"));
			$("#imageMenu li").removeAttr("id");
			$(this).parent().attr("id", "onlickImg");
		}
	}).bind("mouseover", function(){
		if ($(this).attr("id") != "onlickImg") {
			window.clearTimeout(midChangeHandler);
			midChange($(this).attr("src").replace("small", "mid"));
			$(this).css({ "border": "3px solid #959595" });
		}
	}).bind("mouseout", function(){
		if($(this).attr("id") != "onlickImg"){
			$(this).removeAttr("style");
			midChangeHandler = window.setTimeout(function(){
				midChange($("#onlickImg img").attr("src").replace("small", "mid"));
			}, 1000);
		}
	});
    function midChange(src) {
        $("#midimg").attr("src", src).load(function() {
            changeViewImg();
        });
    }
    //大视窗看图
    function mouseover(e) {
        if ($("#winSelector").css("display") == "none") {
            $("#winSelector,#bigView").show();
        }
        $("#winSelector").css(fixedPosition(e));
        e.stopPropagation();
    }
    function mouseOut(e) {
        if ($("#winSelector").css("display") != "none") {
            $("#winSelector,#bigView").hide();
        }
        e.stopPropagation();
    }
    $("#midimg").mouseover(mouseover); //中图事件
    $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

    var $divWidth = $("#winSelector").width(); //选择器宽度
    var $divHeight = $("#winSelector").height(); //选择器高度
    var $imgWidth = $("#midimg").width(); //中图宽度
    var $imgHeight = $("#midimg").height(); //中图高度
    var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

    function changeViewImg() {
        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
    }
    changeViewImg();
    $("#bigView").scrollLeft(0).scrollTop(0);
    function fixedPosition(e) {
        if (e == null) {
            return;
        }
        var $imgLeft = $("#midimg").offset().left; //中图左边距
        var $imgTop = $("#midimg").offset().top; //中图上边距
        X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
        Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
        X = X < 0 ? 0 : X;
        Y = Y < 0 ? 0 : Y;
        X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
        Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

        if ($viewImgWidth == null) {
            $viewImgWidth = $("#bigView img").outerWidth();
            $viewImgHeight = $("#bigView img").height();
            if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                $viewImgWidth = $viewImgHeight = 800;
            }
            $height = $divHeight * $viewImgHeight / $imgHeight;
            //$("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
            //$("#bigView").height($height);
			$("#bigView").width(550);
            $("#bigView").height(320);
        }
        var scrollX = X * $viewImgWidth / $imgWidth;
        var scrollY = Y * $viewImgHeight / $imgHeight;
        $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
        //$("#bigView").css({ "top":0, "left": $(".preview").offset().left + $(".preview").width() + 15 });
		$("#bigView").css({ "top":0, "left":655 });
        return { left: X, top: Y };
    }
});



var selData = ({
	goodsId : '${goodsVO.goods.id}',
	pageNumber : 1
})

function paging(cfg) {
    var paginator = $("#pageCon");

    paginator.jqPaginator({
        totalCounts: 500,//总条目数
        pageSize: 10,//每一页显示的条目数
        visiblePages: 5,//分多少页
        currentPage: 1,//当前页数
        first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
        prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
        next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
        last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
        page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
        wrapper: '<ul class="pageBtn"></ul>',

        //页面加载和点击页码时请求数据
        onPageChange: function (num) {
        	selData.pageNumber= num;
            $.get(cfg.url, selData, function (res) {
                if (res.result.length == 0) {
                    $("#pageCon").html('<p style="padding: 20px;text-align: center">暂无评价！</p>');
                    return;
                }

                var html = "";

                //重新配置分页的总条目数
                var count = -(res.msg) * (-1);
                paginator.jqPaginator('option', {
                    totalCounts: count
                });

                for (var i = 0; i < res.result.length; i++) {
                	
                	html+='<div class="comment">';
                	html+='<div class="single-comment">';
                	html+='<div class="userImg">';
                	html+='<img src="'+res.result[i].member.headimgurl+'"/>';
                	html+='<span>'+res.result[i].member.nickname+'</span>';
                	html+='</div>';
                	html+='<div class="pro-right">';
                	html+='<div class="pro-right-top">';
                	html+='<span class="raty" data-score="'+res.result[i].score+'"></span><span class="date"></span>';
                	html+='</div>';
                	html+='<p>'+res.result[i].content+'</p>';
                	html+='<div class="imgBox">';
                	html+='<ul>';
                	for (var j = 0; j < res.result[i].picList.length; j++) {
						html+='<li><img src="'+res.result[i].picList[j].picurl+'"/></li>';
					}
                	html+='</ul>';
                	html+='</div>';
                	html+='</div>';
                	html+='</div>';
                	html+='</div>';
                }

                $("#pageCon").append(html);
                //分数
        		score($(".raty"));
                //$("#pageCon").hidden();
            });
        }
    });
}
paging({url: "${path}/commodity/commentlist"});


</script>

 	</body>
 </html>
